<template>
  <div class="completeInfoDetail">
    <section class="header">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">信息补全列表{{ name ? "/" + name : "" }}</span>
    </section>
    <div class="main-content clearfix">
      <h2 class="error" v-if="causeContent">提示：{{ causeContent }}</h2>
      <h2>五险一金缴纳状态</h2>
      <div class="input-box">
        <el-checkbox v-model="socialSecurity"
          >该员工在当地缴纳过社保</el-checkbox
        >
      </div>
      <div class="input-box">
        <el-checkbox v-model="accumulationFund"
          >该员工在当地缴纳过公积金</el-checkbox
        >
      </div>
      <h2 v-show="socialSecurity || accumulationFund">需填写信息</h2>
      <div class="input-box">
        <section v-show="socialSecurity">
          <span class="title">社保帐号</span>
          <span class="value">
            <el-input
              v-model.trim="socialSecurityAccount"
              placeholder="在这里输入社保帐号"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section v-show="accumulationFund">
          <span class="title">公积金帐号</span>
          <span class="value">
            <el-input
              v-model.trim="gjjAccount"
              placeholder="在这里输入公积金帐号"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <h2>需上传材料</h2>
      <div class="p-t-lg">
        <div class="main">
          <div class="clearfix">
            <div class="img-box" v-show="!socialSecurity">
              <div class="img-bj" @click="showImg(0)">
                <el-image
                  v-if="idCardFrontPhotoPath"
                  style="width: 100%; height: 100%"
                  :src="idCardFrontPhotoPath"
                  :preview-src-list="srcList"
                ></el-image>
              </div>
              <p>身份证正面照片(头像面)</p>
              <ul>
                <li class="upBtn">
                  上传
                  <input type="file" name="" id="" @change="upImg($event, 2)" />
                </li>
              </ul>
            </div>
            <div class="img-box" v-show="!socialSecurity">
              <div class="img-bj" @click="showImg(1)">
                <el-image
                  v-if="idCardBackPhotoPath"
                  style="width: 100%; height: 100%"
                  :src="idCardBackPhotoPath"
                  :preview-src-list="srcList"
                ></el-image>
              </div>
              <p>身份证反面照片(国徽面)</p>
              <ul>
                <li class="upBtn">
                  上传
                  <input type="file" name="" id="" @change="upImg($event, 3)" />
                </li>
              </ul>
            </div>
            <div class="img-box">
              <div class="img-bj" @click="showImg(2)">
                <el-image
                  v-if="residenceBookMainPath"
                  style="width: 100%; height: 100%"
                  :src="residenceBookMainPath"
                  :preview-src-list="srcList"
                ></el-image>
              </div>
              <p>户口本主页</p>
              <ul>
                <li class="upBtn">
                  上传
                  <input type="file" name="" id="" @change="upImg($event, 4)" />
                </li>
              </ul>
            </div>
            <div class="img-box">
              <div class="img-bj" @click="showImg(3)">
                <el-image
                  v-if="residenceBookPersonalPath"
                  style="width: 100%; height: 100%"
                  :src="residenceBookPersonalPath"
                  :preview-src-list="srcList"
                ></el-image>
              </div>
              <p>户口本个人页</p>
              <ul>
                <li class="upBtn">
                  上传
                  <input type="file" name="" id="" @change="upImg($event, 5)" />
                </li>
              </ul>
            </div>
            <div class="img-box" v-show="!socialSecurity">
              <div class="img-head" @click="showImg(4)">
                <el-image
                  v-if="personPhotoPath"
                  style="width: 100%; height: 100%"
                  :src="personPhotoPath"
                  :preview-src-list="srcList"
                ></el-image>
              </div>
              <p>二寸白底免冠照</p>
              <ul>
                <li class="upBtn">
                  上传
                  <input type="file" name="" id="" @change="upImg($event, 1)" />
                </li>
              </ul>
            </div>
          </div>
          <ul class="explain">
            <li>说明</li>
            <li>
              填写完表格后，在业务办理完成之前，尽量不要到员工详情页去编辑员工的这些信息。以免造成员工的信息不准确，导致业务办理失败。
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="cancle" @click="goBack()">返回</div>
      <div class="comfirm" @click="submit()">保存</div>
    </div>
  </div>
</template>

<script>
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "completeInfoDetail",
  data() {
    return {
      name: "",
      personPhotoPath: "",
      idCardFrontPhotoPath: "",
      idCardBackPhotoPath: "",
      residenceBookMainPath: "",
      residenceBookPersonalPath: "",
      socialSecurity: true,
      accumulationFund: true,
      gjjAccount: "",
      socialSecurityAccount: "",
      srcList: [],
      imgList: [],
      causeContent: "",
    };
  },
  methods: {
    //展示指定图片
    showImg(i) {
      this.srcList = [];
      this.srcList.push(this.imgList[i]);
    },
    //上传
    upImg(e, type) {
      let that = this;
      let file = new FormData();
      file.append("imgFile", e.target.files[0]);
      that.upImgRequest(file, type);
    },
    upImgRequest(file, type) {
      let that = this;
      base
        .postAjax(
          "/user/uploadUserImg?userId=" +
            sessionStorage.getItem("userId") +
            "&type=" +
            type,
          file
        )
        .then((res) => {
          if (res.data.code == 1) {
            that.updateDialog = false;
            that.$message.success(res.data.message);
            if (type == 1) {
              that.personPhotoPath = res.data.data + "?" + new Date().getTime();
            } else if (type == 2) {
              that.idCardFrontPhotoPath =
                res.data.data + "?" + new Date().getTime();
            } else if (type == 3) {
              that.idCardBackPhotoPath =
                res.data.data + "?" + new Date().getTime();
            } else if (type == 4) {
              that.residenceBookMainPath =
                res.data.data + "?" + new Date().getTime();
            } else if (type == 5) {
              that.residenceBookPersonalPath =
                res.data.data + "?" + new Date().getTime();
            }
            this.imgList = [
              that.idCardFrontPhotoPath,
              that.idCardBackPhotoPath,
              that.residenceBookMainPath,
              that.residenceBookPersonalPath,
              that.personPhotoPath,
            ];
          } else {
            that.$message.error(res.data.message);
          }
        });
    },
    goBack() {
      sessionStorage.removeItem("userId");
      this.$router.go(-1);
    },
    switchFun(i) {
      this.switchIndex = i;
    },
    getData() {
      base
        .getAjax("/user/employeeDetails", {
          userId: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.personPhotoPath = res.data.data.qlUser.personPhotoPath;
            this.idCardFrontPhotoPath =
              res.data.data.qlUser.idCardFrontPhotoPath;
            this.idCardBackPhotoPath = res.data.data.qlUser.idCardBackPhotoPath;
            this.residenceBookMainPath =
              res.data.data.qlUser.residenceBookMainPath;
            this.residenceBookPersonalPath =
              res.data.data.qlUser.residenceBookPersonalPath;
            this.gjjAccount = res.data.data.qlUser.gjjAccount;
            this.socialSecurityAccount =
              res.data.data.qlUser.socialSecurityAccount;
            this.imgList = [
              res.data.data.qlUser.idCardFrontPhotoPath,
              res.data.data.qlUser.idCardBackPhotoPath,
              res.data.data.qlUser.residenceBookMainPath,
              res.data.data.qlUser.residenceBookPersonalPath,
              res.data.data.qlUser.personPhotoPath,
            ];
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    getErrorInfo() {
      base
        .getAjax("/user/getAuditFailedUser", {
          userId: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data) {
              this.causeContent = res.data.data.causeContent;
            }
          } else {
            this.$message.error(res.data.message);
          }
        });
    },

    submit() {
      base
        .postAjax("/user/completionUserInfo", {
          userId: sessionStorage.getItem("userId"),
          socialSecurityAccount: this.socialSecurity
            ? this.socialSecurityAccount
            : "",
          gjjAccount: this.accumulationFund ? this.gjjAccount : "",
        })
        .then((res) => {
          this.loading = false;
          if (res.data.code == 1) {
            this.$message({
              message: res.data.message,
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.goBack();
            }, 1500);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
  },
  created() {
    this.name = sessionStorage.getItem("username");
    this.getErrorInfo();
    this.getData();
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  cursor: pointer;
  margin-right: 5px;
}
.header span {
  cursor: pointer;
}
.main-content {
  padding: 0 30px 30px;
}
h2 {
  display: block;
  color: #333;
  font-size: 16px;
  margin: 30px 0;
  clear: both;
}
.main-content > div {
  margin: 0 40px 20px 20px;
}
.input-box .title {
  display: inline-block;
  margin-right: 20px;
  width: 70px;
  color: #666;
}
.input-box .title i,
.error {
  color: #f56c6c;
}
.el-input,
.el-select {
  width: 228px;
}
.error {
  text-align: center;
}
.button-box {
  clear: both;
  border-top: 1px solid #eee;
  text-align: center;
  padding: 30px;
  margin: 0 auto;
}
.button-box div {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.comfirm {
  margin-left: 10px;
  color: #fff;
  background-color: #13cb6e;
}
.tip > div {
  color: #999;
  display: inline-block;
  width: 225px;
  margin: 0 10px 10px 0;
}
.img-bj {
  position: relative;
  width: 225px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head {
  position: relative;
  width: 108px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head img,
.img-bj img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  border-radius: 4px;
}
.img-box p {
  color: #999;
  font-size: 12px;
}
.tip > ul {
  color: #999;
  float: left;
  width: 225px;
  margin: 0 10px 10px 0;
}
.img-box {
  float: left;
  margin: 0 10px 10px 0;
}
.img-box .tip-head {
  color: #999;
  width: 108px;
  margin: 0 10px 10px 0;
}
.img-box .upBtn {
  margin-top: 10px;
  position: relative;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  background-color: #13cb6e;
}
.img-box .upBtn input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.explain {
  color: #999;
  margin-top: 10px;
}
.error {
  color: #f56c6c;
  text-align: left;
}
</style>
